import React, { PureComponent } from 'react';
import { message, Form, Input, Divider, Table } from 'antd';
import { connect } from 'dva';
import SyOrderTableComponent from '../../components/SyOrderTableComponent';
import baseStyles from '../../components/SyOrderTableComponent/index.less';


@Form.create()
@connect(state => ({
  modelState: state.customer,
}))
export default class Customer extends SyOrderTableComponent {

  // 缺省
  _initSortion = { sortField: 'id', sortOrder: 'desc', };
  _initPagination = { pageSize: 10, current: 1, };
  _initCriteriaQuery = {};
  _operator = [
  ];

  initSelection() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'product/fetchSelectItems',
    //   payload: { service: '/product', apiUrl: '/productCategory', selectName: 'catSelectItems', current: 1, pageSize: 1000 }
    // });
  }

  componentWillMount() {
    console.log('111111111111111111111111111')
    this.initSelection();
    this.setState({
      baseModel: 'businessOrder',
      operator: this._operator,
      initPagination: this._initPagination,
      initSortion: this._initSortion,
      initCriteriaQuery: this._initCriteriaQuery,
      needSearch: true,
      needAdd: false,
      needEdit: false,
      needDelete: false,
      needTableColumnsOperator: false,
      needTableCheckbox: true,
      tableBorder: false,
      // defaultExpandAllRows: true,
      entityStatus: [
        { name: '全部', value: '' },
        { name: '待付款', value: 'TO_BE_PAY' },
        { name: '待发货', value: 'TO_BE_DELIVER' },
        { name: '已发货', value: 'DELIVERED' },
        { name: '已完成', value: 'FINISHED' },
        { name: '已关闭', value: 'CLOSED' },
        { name: '退款中', value: 'REFUND' },
        { name: '待收款', value: 'TO_BE_RECEIPT' },
        { name: '逾期', value: 'OVERDUE' },
      ],
      statusField: 'status',
      statusQuery: { status: '' },
      tableScroll: { y: 800 },
      tableColumns: [
        // {
        //   title: '订单号',
        //   dataIndex: 'order.id',
        //   width: 180,
        // },
        {
          title: '订单号',
          dataIndex: 'order.wzOrderId',
          width: 180,
        },
        {
          title: '客户姓名',
          dataIndex: 'user.name',
          width: 160,
        },
        {
          title: '客户手机号',
          dataIndex: 'user.mobile',
          width: 160,
        },
        {
          title: '总金额',
          dataIndex: 'order.totalAmount',
          width: 150,
          render: (text) => <span>￥ {text}</span>
        },
        {
          title: '实付金额',
          dataIndex: 'order.discountAmount',
          width: 150,
          render: (text) => <span>￥ {text}</span>
        },
        {
          title: '订单类型',
          dataIndex: 'order.type',
          width: 120,
          // 0-普通订单, 3-分期订单-3期,6-分期订单-6期,10-分期订单-10期
          render: (text, record) => {
            let t = '';
            switch (text) {
              case 0:
                t = '普通订单';
                break;
              case 3:
                t = '分期订单-3期';
                break;
              case 6:
                t = '分期订单-6期';
                break;
              case 10:
                t = '分期订单-10期';
                break;
              default:
                break;
            }
            return <span>{t}</span>;
          }
        },
        {
          title: '订单状态',
          dataIndex: 'order.status',
          width: 120,
          render: (text, record) => {
            let status = this.state.entityStatus.filter(d => d.value === record.order.status)[0]
            return <span>{status ? status.name : ''}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'order.remark',
          type: 'longString',
          width: 200,
        },
        {
          title: '下单时间',
          dataIndex: 'order.createTime',
          // width: 180,
          sorter: true,
        },
      ],
      expandedRowRender: this.expandedOrderItemRender,
      searchFormItem: [
        {
          name: 'wzOrderId',
          label: '订单号',
          placeholder: '订单号',
          type: 'string',
          selectOption: [{ name: '', value: '' }],
        },
      ],
      simpleAddFormItem: [
      ],
      simpleEditFormItem: [
      ],
    });
  }


  expandedOrderItemRender = (record) => {
    // return (<div>a</div>);
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'productName',
        width: 600,
      },
      {
        title: '商品',
        dataIndex: 'productImg',
        width: 90,
        className: baseStyles.nopadding,
        render: (text, record) =>
          (text) ?
            (

              <img style={{ width: 60, height: 60, cursor: 'pointer', margin: 6, }} src={record.productImg}
                onClick={() => {
                  let values = [];
                  values.push({ title: 'productImg', src: record.productImg });
                  this.onImageViewClick(values)
                }} />
            )
            :
            <span style={{ color: '#e8e8e8' }}> / </span>
      },
      // {
      //   title: '数量',
      //   dataIndex: 'amount',
      //   width: 180,

      // },
      {
        title: '单价',
        dataIndex: 'price',
        width: 180,
        render: (text, record) =>
          <div>
            <span>
              {record.price ? ('¥ ' + record.price) : '/'}
            </span>
            <Divider style={{ margin: 3 }} />
            <span>
              {record.amount ? record.amount + '件' : '/'}
            </span>
          </div>,
      },
      {
        title: '小计',
        dataIndex: 'itemAmount',
        width: 180,
        render: (text, record) => <span>￥ {record.amount * record.price}</span>,
      },
      {
        title: 'status',
        dataIndex: '',
      },
    ];

    const data = record.orderItemList;
    return (
      <div style={{ border: '1px solid blue', margin: -5, borderRadius: 5, boxShadow: '6px 6px 6px #888888' }}>
        <Table
          showHeader={false}
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered={false}
          size='small'
        />
      </div>
    );
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    super.componentDidMount();
  }

}
